List
List
Basic list display, which can carry text, lists, pictures, paragraphs.
Importimport{ List }from"antd"; |
Sourcecomponents/list |
When To Use
A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.
Examples
Default Size
Header
- [ITEM] Racing car sprays burning fuel into crowd.
- [ITEM] Japanese princess to wed commoner.
- [ITEM] Australian walks 100km after outback crash.
- [ITEM] Man charged over missing wedding girl.
- [ITEM] Los Angeles battles huge wildfires.
Small Size
Header
- Racing car sprays burning fuel into crowd.
- Japanese princess to wed commoner.
- Australian walks 100km after outback crash.
- Man charged over missing wedding girl.
- Los Angeles battles huge wildfires.
Large Size
Header
- Racing car sprays burning fuel into crowd.
- Japanese princess to wed commoner.
- Australian walks 100km after outback crash.
- Man charged over missing wedding girl.
- Los Angeles battles huge wildfires.
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- 156
- 156
- 2
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- 156
- 156
- 2
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- 156
- 156
- 2
Pagination Position:
Pagination Align:
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
Title 5
Card content
Title 6
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content
title
Card content
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
Title 5
Card content
Title 6
Card content
No data
Default Size
Header
- [ITEM] Racing car sprays burning fuel into crowd.
- [ITEM] Japanese princess to wed commoner.
- [ITEM] Australian walks 100km after outback crash.
- [ITEM] Man charged over missing wedding girl.
- [ITEM] Los Angeles battles huge wildfires.
Small Size
Header
- Racing car sprays burning fuel into crowd.
- Japanese princess to wed commoner.
- Australian walks 100km after outback crash.
- Man charged over missing wedding girl.
- Los Angeles battles huge wildfires.
Large Size
Header
- Racing car sprays burning fuel into crowd.
- Japanese princess to wed commoner.
- Australian walks 100km after outback crash.
- Man charged over missing wedding girl.
- Los Angeles battles huge wildfires.
Meta
Vertical
Empty Text
No data
API
Common props ref:Common props
List
Property | Description | Type | Default | Version |
---|---|---|---|---|
bordered | Toggles rendering of the border around the list | boolean | false | |
dataSource | DataSource array for list | any[] | - | |
footer | List footer renderer | ReactNode | - | |
grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - | |
header | List header renderer | ReactNode | - | |
itemLayout | The layout of list | horizontal | vertical | horizontal | |
loading | Shows a loading indicator while the contents of the list are being fetched | boolean | SpinProps (more) | false | |
loadMore | Shows a load more content | ReactNode | - | |
locale | The i18n text including empty text | object | {emptyText: No Data } | |
pagination | Pagination config, hide it by setting it to false | boolean | object | false | |
renderItem | Customize list item when using dataSource | (item) => ReactNode | - | |
rowKey | Item's unique value, could be an Item's key which holds a unique value of type React.Key or function that receives Item and returns a React.Key | keyof T | (item: T) => React.Key | "key" | |
size | Size of list | default | large | small | default | |
split | Toggles rendering of the split under the list item | boolean | true |
pagination
Properties for pagination.
Property | Description | Type | Default |
---|---|---|---|
position | The specify the position of Pagination | top | bottom | both | bottom |
align | The specify the alignment of Pagination | start | center | end | end |
More about pagination, please check Pagination
.
List grid props
Property | Description | Type | Default | Version |
---|---|---|---|---|
column | The column of grid | number | - | |
gutter | The spacing between grid | number | 0 | |
xs | <576px column of grid | number | - | |
sm | ≥576px column of grid | number | - | |
md | ≥768px column of grid | number | - | |
lg | ≥992px column of grid | number | - | |
xl | ≥1200px column of grid | number | - | |
xxl | ≥1600px column of grid | number | - |
List.Item
Property | Description | Type | Default | Version |
---|---|---|---|---|
actions | The actions content of list item. If itemLayout is vertical , shows the content on bottom, otherwise shows content on the far right | Array<ReactNode> | - | |
classNames | Semantic structure className | Record<actions | extra, string> | - | 5.18.0 |
extra | The extra content of list item. If itemLayout is vertical , shows the content on right, otherwise shows content on the far right | ReactNode | - | |
styles | Semantic DOM style | Record<actions | extra, CSSProperties> | - | 5.18.0 |
List.Item.Meta
Property | Description | Type | Default | Version |
---|---|---|---|---|
avatar | The avatar of list item | ReactNode | - | |
description | The description of list item | ReactNode | - | |
title | The title of list item | ReactNode | - |
Semantic DOM
- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- 156
- 156
- 2
extra
5.18.0set `extra` of List.Itemactions
5.18.0set `actions` of List.Item
Design Token
Component TokenHow to use?
Token Name | Description | Type | Default Value |
---|---|---|---|
avatarMarginRight | Right margin of avatar | undefined | MarginRight<string | number> | 16 |
contentWidth | Width of content | string | number | 220 |
descriptionFontSize | Font size of description | number | 14 |
emptyTextPadding | Padding of empty text | undefined | Padding<string | number> | 16 |
footerBg | Background color of footer | string | transparent |
headerBg | Background color of header | string | transparent |
itemPadding | Padding of item | string | 12px 0 |
itemPaddingLG | Padding of large item | string | 16px 24px |
itemPaddingSM | Padding of small item | string | 8px 16px |
metaMarginBottom | Margin bottom of meta | undefined | MarginBottom<string | number> | 16 |
titleMarginBottom | Margin bottom of title | undefined | MarginBottom<string | number> | 12 |